<html>

<head>
    <meta charset="UTF-8">
    <title>京东购物车</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            padding: 8px 0;
        }

        /*购物车地址栏*/
        .cartBox {
            width: 990;
            margin: 0 auto;
            margin-top: 200px;
        }

        .cartBox tr.title>th:nth-child(1) {
            text-align: left;
            font-weight: bold;
            color: red;
        }

        .cartBox tr.title>th:nth-child(2) {
            text-align: right;
            color: #666;
            font-size: 14px;
            font-weight: 200;
        }

        .cartBox tr.title>th:nth-child(2) span {
            display: inline-block;
            padding: 2px 4px;
            font: size 13px;
            ;
            border: 1px solid #666;
        }

        /*购物车标题*/
        .cartBox .head {
            background: #f2f2f2;
        }

        .cartBox tr td:last-child {
            min-width: 80px;
            text-align: center;
        }

        table tr a {
            text-decoration: none;
            color: #444;
        }

        /*商铺部分*/
        .cartBox .shop td:last-child {
            text-align: left;
            color: #444;
            font-size: 14px;
            font-weight: bold;
        }

        .cartBox .shop td:last-child:hover {
            color: red;
        }

        /*商品样式*/
        .cartBox .goods {
            border: 1px solid #f2f2f2;
            border-top: 3px solid gray;
        }

        .cartBox .goods td {
            padding: 15px 0 30px 0;
        }

        .cartBox tr td:nth-child(1){
            width:30px ;
            text-align: center;
            vertical-align: top;
        }

        .head td;:nth-child(2) .goods td:nth-child(2){
            width: 100px;
        }

        .goods td{
            font-size: 12px;
            vertical-align: top;
        }

        .goods td:nth-child(2){
            text-align: center;
        }

        .goods td:nth-child(3) span{
            display: inline-block;
            width: 200px;
            height: 32px;
            overflow: hidden;
            padding: 0 6px;
        }

        .goods td:nth-child(4){
            width: 140px;
            text-align: center;
        }

        .goods td:nth-child(4) span{
            width: 122px;
            display: inline-block;
height: 16px;
overflow: hidden;
white-space: nowrap;
        text-overflow: ellipsis;
    }

    .goods td:nth-child(5){
        width: 90px;
text-align: center;
})
.goods td:nth-child(6){
    width: 80px;
    text-align: center;
}
.goods number{
    display: flex;
}
.goods .number span{
    display: inline-block;
    width: 36px;
    height: 16px;
    border: 1px soild gray;
    background: #f3f3f3;
}
.goods .number input{
width: 36px;
border-radius: 0;
text-align: center;
height: 18px;
border: 1px solid gray;
border-left-width: 0;
border-left-width: 0;
}
input-webkit-outer-spin-botton{
    -webkit-appearance: none;
}
input-webkit-outer-spin-botton{
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}
.goods td:nth-child(7){
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
.js{
    display: flex;
    font-size: 12px;
    color: #666;
    background: #fff;
    height: 60px;
    width: 999px;
    margin: 0 auto;
    border: 1px solid #f2f2f2;
    margin-top: 10px;
    align-items: center;
}
.js div{
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
}
    </style>
</head>

<body>
    <div class="cartBox">
        <table>
            <!--表头-->
            <tr class="title">
                <th colspan="5">全部商品</th>
                <th colspan="3">
                    配送至:
                    <span>
                        河南省平顶山市宝丰县
                    </span>
                </th>
            </tr>
            <!--内容-->
            <tr class="head">
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    全选
                </td>
                <td colspan="2">
                    商品
                </td>
                <td>
                    单价
                </td>
                <td>
                    数量
                </td>
                <td>
                    小计
                </td>
                <td>
                    操作
                </td>
            </tr>
            <!--商品店铺-->
            <tr class="shop">
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td colspan="7">
                    <a href="#">箭牌京东自营旗舰店</a>
                </td>
            </tr>
            <!--商品信息-->
            <tr class="goods">
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>
                    <img
                        src="https://img13.360buyimg.com/n0/s80x80_jfs/t1/190205/3/30444/92977/636cb7fbE9981f875/0451b4df6af3c58e.jpg.dpg">
                </td>
                <td>
                    绿箭（DOUBLEMINT）无糖薄荷糖
                </td>
                <td>
                    <span>原味薄荷味约35粒23.8g单盒金属装</span>
                    <span>办公室休闲零食糖果</span>
                </td>
                <td>
                    ￥7.88
                </td>
                <td>
                    <span>-</span>
                    <input type="number">
                    <span>+</span>
                </td>
                <td>
                    ¥15.76
                </td>
                <td>
                    <span>删除</span>
                </td>
            </tr>
        </table>
        <div class="js">
            <input type="checkbox">
            <div>全选</div>
            <div>删除选中</div>
            <div>移入关注</div>
            <div>清理购物车</div>
            <div></div>
            <div>已选0件商品</div>
            <div>总价格￥0.00</div>
            <div>去结算</div>
        </div>
    </div>
</body>

</html>